<!DOCTYPE html>
<html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>学院管理</title>
    <link rel="stylesheet" type="text/css" href="/static/admin/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/static/admin/css/admin.css"/>
    <script src="/static/admin/js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div class="page-content-wrap">
    <div class="layui-inline">
        <input class="layui-input" name="collegeName" id="collegeName" placeholder="学院"
               style="height: 30px;float: left;width: 150px;margin-left: 20px;" type="text">
    </div>
    <button class="layui-btn layui-btn-sm" id="serach" data-type="reload">搜索</button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" id="reset" data-type="reset" style="margin-left: 20px;">
        重置
    </button>
    <div class="layui-row">
        <table class="layui-hide" id="table" lay-filter="table">

        </table>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">新增</button>
    </div>
</script>
<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    {{#  if(d.status == 1 ){ }}
        <input type="checkbox" name="lock" value="{{d.status}}" data-id="{{d.collegeId}}" checked lay-skin="switch" lay-text="启用|禁用" lay-filter="lockDemo" lay-event="updateStatus">
    {{# }else{ }}
        <input type="checkbox" name="lock" value="{{d.status}}" data-id="{{d.collegeId}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="lockDemo" lay-event="updateStatus">
    {{# } }}
</script>
<script src="/static/admin/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/admin/js/module/dialog.js" type="text/javascript" charset="utf-8"></script>
<script>
    //加载表单提交 要和上面的分开写
    layui.use(['table', 'laydate'], function () {
        var table = layui.table;
        var form = layui.form;

        var tableFunction = table.render({
            elem: '#table'
            , url: '/college/list.json'
            , toolbar: '#toolbarDemo'
            , title: '学院信息'
            , cols: [
                [
                    // {field: 'collegeId', title: 'ID', width: 120},
                     {field: 'collegeName', title: '学院名称'}
                    , {field:'right', title:'是否启用', width:100, templet: '#checkboxTpl', unresize: true}
                ]
            ]
            , limit: 10
            , limits: [10, 20, 30, 40, 50, 100, 200, 500, 1000, 5000, 10000]
            , page: true
            , id: 'tableReload'
            ,response: {
                statusCode: 0 //重新规定成功的状态码为 200，table 组件默认为 0
            }
            ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.totalCount, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
        });


        //搜索事件
        var $ = layui.$, active = {
            reload: function () {
                var collegeName = $("#collegeName").val();
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        collegeName: collegeName,
                    }
                });
            }
        };

        $('#serach').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $('#reset').on('click', function () {
            $("#collegeName").val("");
            tableFunction.reload();
        });

        //头工具栏事件
        table.on('toolbar(table)', function (obj) {
            // var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    layer.open({
                        type: 2,
                        title: '新增学生信息',
                        area: ['700px', '600px'],
                        content: '/college/collegeAdd.json'
                    });
                    break;
            }

        });

        //监听行工具事件
        table.on('tool(table)', function (obj) {
        });


        //监听操作
        form.on('switch(lockDemo)', function(obj){
            // var checkStatus = table.checkStatus(obj.config.id);
            var checked = obj.elem.checked;
            var status;
            if (checked) {
                status = 1;
            } else {
                status = 0;
            }
            var data = {
                collegeId: $(this).attr("data-id"),
                status: status
            }
            console.log(data);
            $.ajax({
                url: "/college/updateStatus.json",
                type: "POST",
                data: JSON.stringify(data),
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    if (result.success) {
                        tableFunction.reload();
                        layer.msg("操作成功", {
                            icon: 1,
                            time: 1000
                        });
                    } else {
                        tableFunction.reload();
                        layer.msg("操作失败", {
                           icon: 5,
                           time: 1000
                        });
                    }
                },
                error: function () {

                }
            });
        });
    });
</script>
<script>
</script>
</body>
</html>